/**
 * Created by wei on 17/10/25.
 */
import React, { Component } from 'react';
import axios from 'axios';
import base from '../base.js';
import cookie from '../cookie.js';
import Publish from '../front/publish.js';
import PropTypes from 'prop-types';
import LoginForm from '../front/login.js';
import RegisterForm from '../front/register.js';
import "../main.css";

const basePath = base().basePath;



class Header extends Component{

    constructor(props){
        super(props);

        this.state = {
            login_visible: false,
            register_visible: false,
            userId:'',
            nickname:'',
            avatar:'',
            publishVisible: false,
            hotClick: false,
            newClick: true,
            token:'',
            notify:false,
        }

        this.showLogin = this.showLogin.bind(this);
        this.showRegister = this.showRegister.bind(this);
        this.logout = this.logout.bind(this);
    }

    componentDidMount(){
        const {init} = this.props;

        var nickname = cookie.getCookie('nickname');
        var token = cookie.getCookie('token');
        var avatar = cookie.getCookie('avatar');
        if(init){
            this.setState({
                // register_visible:false,
                nickname:nickname,
                avatar:avatar,
                token:token,
                hotClick: false,
                newClick: false,
            });
        }else{
            this.setState({
                // register_visible:false,
                nickname:nickname,
                avatar:avatar,
                token:token,
            });
        }


        if('' !== token){
            var that = this;
            setInterval(function () {
                axios.get(basePath+"/information/h", {headers: { token: token }
                }).then(
                    (res) => {
                        if(res.data.result === 'true'){
                            that.setState({
                                notify: true,
                            });
                        }else{
                            that.setState({
                                notify: false,
                            });
                        }
                    }
                );
            },60000);

        }

    }


    showLogin(){
        this.setState({
            login_visible:true,
        });
    }

    showRegister(){
        this.setState({
            register_visible:true,
        });
    }

    fnClosePublish(flag){
        const {fnCallback} = this.props;
        this.setState({
            publishVisible: false,
            hotClick: false,
            newClick: true,
        });
        if(flag){
            fnCallback(basePath+"/topic/new");
        }

    }

    fnLoginHideDiv(){
        var nickname = cookie.getCookie('nickname');
        var token = cookie.getCookie('token');
        var avatar = cookie.getCookie('avatar');
        var userId = cookie.getCookie('userId');
        this.setState({
            login_visible:false,
            nickname:nickname,
            avatar:avatar,
            token:token,
        });
    }

    fnRegisterHideDiv(){
        var nickname = cookie.getCookie('nickname');
        var token = cookie.getCookie('token');
        var avatar = cookie.getCookie('avatar');
        this.setState({
            register_visible:false,
            nickname:nickname,
            avatar:avatar,
            token:token
        });
    }


    logout(){
        const {fnCallback} = this.props;
        cookie.delCookie('nickname');
        cookie.delCookie('token');
        cookie.delCookie('avatar');
        this.setState({
            nickname:'',
            avatar:'',
            token:''
        });
        var url = window.location.href;
        window.location.href = url;
    }

    publish(){
        this.setState({
            publishVisible:true,
        });
    }

    paramsGen(content){
        var json = {};
        json.token = this.state.token;
        json.content = content;
        return json;
    }

    clickMenu(type){
        const {fnCallback} = this.props;
        if(type == 'noshow'){
            this.setState({
                hotClick: true,
                newClick: false,
            });
            fnCallback(basePath+"/topic/noshow");
        }else if(type == 'new'){
            this.setState({
                hotClick: false,
                newClick: true,
            });
            fnCallback(basePath+"/topic/new");
        }
    }

    showUserInfo(){

            let notify;
            if(this.state.notify){
                notify = (<div className="notify2"></div>);
            }

            return (
                <div style={{float:'left', height:'83px',width:'300px'}}>
                    <div style={{width:'80px', lineHeight:'80px',float:'left'}}>
                        <a href="#top" onClick={()=>this.publish()}>
                            <span>讲一个</span>
                        </a>
                    </div>

                    <Publish suspend={true} paramsGen={this.paramsGen.bind(this)}
                             url={basePath+"/topic/add_back"}
                             image={true}
                             visible={this.state.publishVisible}
                             close={this.fnClosePublish.bind(this)}/>

                </div>
            );
    }

    render(){
        return (
            <div className="head">
                <div style={{width:'85%', margin:'0 auto'}}>
                    <div style={{float:'left', width:'70%'}}>
                        <a style={{float:'left'}}><img src="/images/logo.png"/></a>
                        <a href="javascript:void(0);" onClick={()=>this.clickMenu('noshow')} className={this.state.hotClick ? "title-select" : "title"}><h1>&nbsp;系统&nbsp;</h1></a>
                        <a href="javascript:void(0);" onClick={()=>this.clickMenu('new')} className={this.state.newClick ? "title-select" : "title"}><h1>&nbsp;最新&nbsp;</h1></a>
                    </div>
                    {this.showUserInfo()}

                </div>
                <LoginForm visible={this.state.login_visible} fnHideDiv={this.fnLoginHideDiv.bind(this)}/>
                <RegisterForm visible={this.state.register_visible} fnHideDiv={this.fnRegisterHideDiv.bind(this)}/>
            </div>
        );
    }

}

Header.propTypes = {
    fnCallback: PropTypes.func.isRequired,
    init: PropTypes.bool,
};

export default Header;